import { Button, Table } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useContext, useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.less'
import { reportReviewContext } from '../../_context'
import { ReportChat } from '../../data'
import IconSvg from '@/components/IconSvg'
import { setStorage } from '@/utils/storage'

export default () => {
  const navigate = useNavigate()

  const { tableList, tableLoading, task } = useContext(reportReviewContext)

  const columns: ColumnsType<ReportChat> = useMemo(
    () => [
      {
        title: '行政区',
        dataIndex: 'locationName',
        key: 'locationName',
        align: 'center',
      },
      {
        title: '医院总数',
        dataIndex: 'hospitalNum',
        key: 'hospitalNum',
        align: 'center',
      },
      {
        title: '已上报医院数',
        dataIndex: 'committedNum',
        key: 'committedNum',
        align: 'center',
      },
      {
        title: '未上报医院数',
        key: 'unCommittedNum',
        dataIndex: 'unCommittedNum',
        align: 'center',
      },
      {
        title: '填报率',
        key: 'committedRate',
        dataIndex: 'committedRate',
        align: 'center',
        render: (value) => `${value}%`,
      },
      {
        title: '操作',
        key: 'title',
        align: 'center',
        render: (value, recod) => (
          <div className={styles.btns}>
            <Button
              onClick={() => {
                navigate('/data-review/details', {
                  state: { ...recod, task },
                })
                setStorage('preview', { ...recod, task })
              }}
              className={styles.lookbtn}
              icon={<IconSvg name='look' />}
              type='link'
            >
              查看详情
            </Button>
          </div>
        ),
      },
    ],
    [task],
  )

  return (
    <div className={styles['table-content']}>
      <div className={styles.title}>全省填报详情</div>
      <Table
        rowKey={'cityId'}
        pagination={false}
        loading={tableLoading}
        style={{ marginTop: '24px' }}
        columns={columns}
        dataSource={tableList}
      />
    </div>
  )
}
